<template>
  <div class="loginContainer">
    <Form ref="login" :model="login" :rules="loginRules"  class="card-box">
        <FormItem class="formLogin-title">
                <h3>登录</h3>
        </FormItem>
        <FormItem prop="username">
            <Input size="large" type="text" v-model="login.username" placeholder="用户名" >
                <Icon type="md-person" slot="prepend" />
            </Input>
        </FormItem>
        <FormItem prop="password">
            <Input size="large"  type="password" v-model="login.password" placeholder="密码">
            <Icon type="ios-lock" slot="prepend"/>
            </Input>
        </FormItem>
        <FormItem class="login-no-bottom">
            <Checkbox-group v-model="login.remember">
            <Checkbox label="记住密码" name="remember"></Checkbox>
            </Checkbox-group>
        </FormItem>
        <FormItem class="login-no-bottom">
            <Row >
            <Col :xs="{ span: 4, offset: 6 }" >
                <Button type="primary" @click="submit('login')">登录</Button>
            </Col>
            <Col :xs="{ span: 4, offset: 6 }">
                <Button  type="primary" @click="reset('login')">重置</Button>
            </Col>
            </Row>
        </FormItem>
    </Form>
  </div>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        login: {
            username: '',
            password: '',
            remember: []
        },
        loginRules: {
            username: [
                // { required: true, message: '请填写用户名', trigger: 'blur' }
            ],
            password: [
                // { required: true, message: '请填写密码', trigger: 'blur' },
                // { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
            ]
        }
      }
    },
    methods: {
        submit: function(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$Message.success('Login Success!');
                    this.$store.commit('updataToken', true);
                    // 获取参数里的路由，直接跳转到该路由
                    this.$router.push({ path: this.$route.query.redirect });
                } else {
                    this.$Message.error('Fail!');
                }
            })
        },
      reset: function(name) {
        this.$refs[name].resetFields();
      }
    }
  }
</script>

<style scoped>
.loginContainer {
    width: 400px;
    height: 390px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -195px;
}
</style>
